<template>
  <el-dialog title="提问" :visible="visible" width="700px" :before-close="close">
    <div class="question-wrapper">
      <div class="question-mutable">
        <el-input
          type="textarea"
          autosize
          :minlength="1"
          :maxlength="200"
          placeholder="请输入提问内容"
          v-model="textarea"
        ></el-input>
        <edu-upload
          :args="argsMaterial"
          :value.sync="attachList"
          field="circle"
          ref="circleUpload"
        ></edu-upload>
      </div>
    </div>
    <template slot="footer">
      <el-button type="primary" size="mini" :disabled="disabledValue" @click="handleSubmit"
        >提问</el-button
      >
    </template>
  </el-dialog>
</template>

<script>
import EduUpload from '@/components/EduUpload'
export default {
  components: {
    EduUpload
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      textarea: '',
      argsMaterial: {
        limit: 9,
        upload_type: 'pictureCard'
      },
      attachList: []
    }
  },
  computed: {
    disabledValue() {
      return this.textarea.trim().length < 1
    }
  },
  methods: {
    handleSubmit() {
      this.$emit('click', {
        content: this.textarea.trim(),
        attach: this.attachList
      })
      setTimeout(() => {
        this.textarea = ''
        this.attachList = []
        this.$refs.circleUpload.clearFiles()
      }, 600)
    },
    // 关闭
    close() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.question-wrapper {
  .question-mutable {
    position: relative;
    padding: 20px;
    border: 1px solid #e4e7ed;
    ::v-deep .el-textarea {
      .el-textarea__inner {
        padding: 0;
        border: none;
      }
    }
    ::v-deep .edu-form-upload {
      margin-top: 20px;
      max-width: 100%;
      .el-upload-list--picture-card .el-upload-list__item {
        width: 60px;
        height: 60px;
      }
      .el-upload--picture-card {
        width: 60px;
        height: 60px;
        line-height: 60px;
        border-radius: 0;
        .avatar-uploader-icon {
          font-size: 16px;
        }
      }
      .avatar-uploader-icon-text {
        font-size: 12px;
      }
    }
  }
}
</style>
